<template>
    <div class="container">
      <el-row>
        <el-form :inline="true">
          <el-form-item label="类型名称">
            <el-input v-model="queryInfo.name" placeholder="请输入文章类型"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="search">搜索</el-button>
            <el-button type="primary" @click="toAddArticle">新增类型</el-button>
          </el-form-item>
        </el-form>
      </el-row>
  
      <!-- 作用域插槽1 修改与增加使用 -->
      <el-dialog :title="title" :visible.sync="dialogFormVisible" @close="cancle">
        <el-form :model="fms">
          <el-form-item label="名称" label-width="80px">
            <el-input placeholder="请输入名称" v-model="fms.name"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="cancle">取消</el-button>
          <el-button type="primary" @click="addFm">确定</el-button>
        </div>
      </el-dialog>


      <!-- 作用域插槽2 查看相关联的全部数据 -->
      <el-dialog :title="articletitle" :visible.sync="dialogTableVisible" @close="cancle1">
        <button @click="deleteAllArticles">删除全部关联数据</button>
        <el-table :data="articleList">
          <el-table-column prop="id" label="ID"></el-table-column>
          <el-table-column prop="articlename" label="文章名称"></el-table-column>
          <el-table-column prop="articleintroduce" label="文章简介"></el-table-column>
          <el-table-column prop="readquantity" label="阅读数量"></el-table-column>
          <el-table-column prop="collects" label="收藏数量"></el-table-column>
          <el-table-column prop="createtime" label="创建时间"></el-table-column>
          <el-table-column label="操作">
            <el-link type="primary" @click="deleteArticle(scope.row.id)">删除文章</el-link>
          </el-table-column>
        </el-table>
        <div class="block">
          <el-pagination @size-change="handleArticleSizeChange" @current-change="handleArticleCurrentChange"
            :current-page="articlequeryInfo.pageNum" :page-size="articlequeryInfo.pageSize"
            layout="prev, pager, next" :total="articleTotal">
          </el-pagination>
        </div>
      </el-dialog>

      <div class="table">
        <el-table :data="articleTypeList" border style="width: 100%">
          <el-table-column prop="id" label="ID"></el-table-column>
          <el-table-column prop="name" label="类型名称"></el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-link type="primary" @click="toEditFm(scope.row)">编辑类型</el-link>&#12288;
              <el-link type="primary" @click="findAllRelative(scope.row.id)">查询相关所属文章</el-link>&#12288;
              <el-link type="primary" @click="deleteRow(scope.row.id)">删除</el-link>
            </template>
          </el-table-column>
        </el-table>
      </div>
  
      <!-- 分页区域 -->
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange1"
        :current-page="queryInfo.pageNum" :page-sizes="[2, 6, 8, 10]" :page-size="queryInfo.pageSize"
        layout="total, sizes, prev, pager, next, jumper" :total="total">
      </el-pagination>
    </div>
  </template>
  
<script>
export default {
  data() {
    return {
      queryInfo: {
        name: '',
        pageNum: 1,
        pageSize: 2
      },
      articlequeryInfo: {
        id: '',
        pageNum: 1,
        pageSize: 2
      },
   
      title: '',
      articletitle: '',
      articleTypeList: [],
      articleList: [],
      total: 0,
      articleTotal: 0, // 文章分页总数
      dialogFormVisible: false,
      dialogTableVisible: false,
      fms: {
        id: '',
        name: ''
      }
    };
  },
  mounted() {
    this.queryList();
  },
  methods: {
    cancle1() {
      this.dialogTableVisible = false;
      this.queryList();
    },
    addFm() {
      if (this.fms.id) {
        this.$http.put("http://10.10.18.137:8888/sfzy/articletype/update", this.fms).then(resp => {
          if (resp.data.status === 200) {
            this.$message.success("修改成功！");
            this.clearForm();
            this.queryList();
          } else {
            this.$message.error("接口异常！");
          }
        });
      } else {
        this.$http.post("http://10.10.18.137:8888/sfzy/articletype/insert", this.fms).then(resp => {
          if (resp.data.status === 200) {
            this.$message.success("添加成功！");
            this.clearForm();
            this.queryList();
          } else {
            this.$message.error("接口异常！");
          }
        });
      }
    },
    querArticleList() {

      this.$http
        .get("http://10.10.18.137:8888/sfzy/articletype/selectByForId", {
          params: {
            id: this.articlequeryInfo.id,
            pageNum: this.articlequeryInfo.pageNum,
            pageSize: this.articlequeryInfo.pageSize
          }
        })
        .then(resp => {
          if (resp.data.status === 200) {
            this.articleList = resp.data.data.list[0].articleList;
            this.articleTotal = resp.data.data.total;
          } else {
            this.$message.error("查询失败！");
          }
        });
    },
    clearForm() {
      this.fms = { id: "", name: "" };
      this.dialogFormVisible = false;
    },
    cancle() {
      this.clearForm();
    },
    findAllRelative(id) {
      this.articlequeryInfo.id = id
      this.articletitle = "查看" + id + "全部关联数据";
      this.dialogTableVisible = true;
      this.querArticleList();
    },
    toAddArticle() {
      this.title = "新增文章";
      this.dialogFormVisible = true;
    },
    toEditFm(row) {
      this.fms = { ...row };
      this.title = "修改";
      this.dialogFormVisible = true;
    },
    handleCurrentChange1(id){
      this.articlequeryInfo.pageNum = num;
      this.querArticleList(this.articlequeryInfo.id);
    },
    queryList() {
      this.$http.get("http://10.10.18.137:8888/sfzy/articletype/selectAll", { params: this.queryInfo }).then(resp => {
        if (resp.data.status === 200) {
          this.articleTypeList = resp.data.data.list;
          this.total = resp.data.data.total;
        } else {
          this.$message.error("查询失败！");
        }
      });
    },
    handleSizeChange(size) {
      this.queryInfo.pageSize = size;
      this.queryList();
    },
    handleCurrentChange(num) {
      this.queryInfo.pageNum = num;
      this.queryList();
    },
    handleArticleSizeChange(size) {
      this.articlequeryInfo.pageSize = size;
      this.querArticleList(this.articlequeryInfo.id);
    },
    handleArticleCurrentChange(num) {
      this.articlequeryInfo.pageNum = num;
      this.querArticleList(this.articlequeryInfo.id);
    },
    deleteRow(id) {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.$http.get("http://10.10.18.137:8888/sfzy/articletype/delete?id=" + id).then(resp => {
            if (resp.data.status === 200) {
              this.$message.success(resp.data.message);
              this.queryList();
            } else {
              this.$message.error("无法删除，该数据被其他表引用，点击查看关联信息");
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    search() {
      this.queryInfo.pageNum = 1; // 搜索时从第一页开始
      this.queryList();
    },
    deleteArticle(id) {
      this.$http.get("http://10.10.18.137:8888/sfzy/article/delete?id=" + id).then(resp => {
        if (resp.data.status === 200) {
          this.$message.success(resp.data.message);
          this.querArticleList(this.articlequeryInfo.id);
        } else {
          this.$message.error(resp.data.message);
        }
      });
    },
    deleteAllArticles() {
      this.$confirm("是否要删除该类型的所有文章？", "警告", {
        confirmButtonText: "删不了！确定",
        cancelButtonText: "删不了！确认",
        type: "warning"
      }).then(() => {
        this.$http
          .get("http://10.10.18.137:8888/sfzy/article/deleteAllByTypeId?id=" + this.articlequeryInfo.id)
          .then(resp => {
            if (resp.data.status === 200) {
              this.$message.success(resp.data.message);
              this.querArticleList(this.articlequeryInfo.id);
            } else {
              this.$message.error(resp.data.message);
            }
          });
      });
    }
  }
};
</script>

